function inheritPrototype(subClass, superClass) {
    let p = Object.create(superClass.prototype);
    p.constructor = subClass;
    subClass.prototype = p;
}

let Base = function () {
    this.children = [];
    this.element = null;
};
Base.prototype = {
    init() {
        throw new Error('请重写你的init');
    },
    add() {
        throw new Error('请重写你的add');
    },
    getElement() {
        throw new Error('请重写你的getElement')
    }
};

let FormItem = function (id, parent) {
    Base.call(this);
    this.id = id;
    this.parent = parent;
    this.init();
};
inheritPrototype(FormItem, Base);
FormItem.prototype.init = function () {
    this.element = document.createElement('form');
    this.element.id = this.id;
};
FormItem.prototype.add = function (child) {
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
};
FormItem.prototype.getElement = function () {
    return this.element;
};
FormItem.prototype.show = function () {
    this.parent.appendChild(this.element);
};

let FieldItem = function (id, title) {
    Base.call(this);
    this.id = id;
    this.title = title;
    this.init();
};
inheritPrototype(FieldItem, Base);
FieldItem.prototype.init = function () {
    this.element = document.createElement('fieldset');
    let legend = document.createElement('legend');
    legend.innerHTML = this.title;
    this.element.appendChild(legend);
    this.element.id = this.id;
};
FieldItem.prototype.add = function (child) {
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
};
FieldItem.prototype.getElement = function () {
    return this.element;
};

let Group = function () {
    Base.call(this);
    this.init();
};
inheritPrototype(Group, Base);
Group.prototype.init = function () {
    this.element = document.createElement('div');
};
Group.prototype.add = function (child) {
    this.children.push(child);
    this.element.appendChild(child.getElement());
    return this;
};
Group.prototype.getElement = function () {
    return this.element;
};

let InputItem = function (type, id, name, value) {
    Base.call(this);
    this.type = type;
    this.id = id;
    this.name = name;
    this.value = value;
    this.init();
};
inheritPrototype(InputItem, Base);
InputItem.prototype.init = function () {
    this.element = document.createElement('input');
    this.element.type = this.type;
    this.element.name = this.name;
    this.element.id = this.id;
    this.element.value = this.value;
};
InputItem.prototype.add = function () {};
InputItem.prototype.getElement = function () {
    return this.element;
};

let SpanItem = function (text) {
    Base.call(this);
    this.text = text;
    this.init();
};
inheritPrototype(SpanItem, Base);
SpanItem.prototype.init = function () {
    this.element = document.createElement('span');
    this.element.innerHTML = this.text;
};
SpanItem.prototype.add = function () {};
SpanItem.prototype.getElement = function () {
    return this.element;
};

let LabelItem = function (forId, text) {
    Base.call(this);
    this.text = text;
    this.forId = forId;
    this.init();
};
inheritPrototype(LabelItem, Base);
LabelItem.prototype.init = function () {
    this.element = document.createElement('label');
    this.element.innerHTML = this.text;
    this.element['for'] = this.forId;
};
LabelItem.prototype.add = function () {};
LabelItem.prototype.getElement = function () {
    return this.element;
};

let form = new FormItem('FormItem', document.body);
form.add(
    new FieldItem('account', '账号').add(
        new Group().add(
            new LabelItem('user_name', '用户名：')
        ).add(
            new InputItem('text', 'user_name', 'user_name', '')
        ).add(
            new SpanItem('4到6位数字或字母')
        )
    ).add(
        new Group().add(
            new LabelItem('user_password', '密&emsp;码：')
        ).add(
            new InputItem('password', 'user_password', 'user_password', '')
        ).add(
            new SpanItem('6到12位数字或或者密码')
        )
    )
).add(
    new FieldItem('information', '信息').add(
        new Group().add(
            new LabelItem('nick_name', '昵称：')
        ).add(
            new InputItem('text', 'nick_name', 'nick_name', '')
        )
    ).add(
        new Group().add(
            new LabelItem('user_status', '状态：')
        ).add(
            new InputItem('text', 'user_status', 'user_status', '')
        )
    )
).show();